Creating a detail page with server fetching and adding Navigation

Create a breed details page in src/js/pages/BreedDetails/BreedDetails.js:

import React from 'react';
import { useCurrentRouteData, useParams } from '@tata1mg/router';

const BreedDetails = () => {
  const params = useParams();
  const { data, error, isFetching } = useCurrentRouteData();
  
  if (isFetching) return <div>Loading breed details...</div>;
  if (error) return <div>Error loading breed details: {error.message}</div>;
  if (!data) return <div>No breed found</div>;
  
  const breedImages = data.message || [];
  const breedName = params?.breed

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ textTransform: 'capitalize' }}>{breedName} Dogs Available for Adoption</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
        {breedImages.slice(0, 8).map((imageUrl, index) => (
          <div key={index} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
            <img 
              src={imageUrl} 
              alt={`${breedName} ${index+1}`} 
              style={{ width: '250px', height: '250px', objectFit: 'cover' }} 
            />
            <h2 style={{ textTransform: 'capitalize' }}>{breedName} #{index+1}</h2>
            <p>Age: {Math.floor(Math.random() * 10) + 1} years</p>
          </div>
        ))}
      </div>
    </div>
  );
};

// Server fetcher for SSR
BreedDetails.serverFetcher = async ({ params }) => {
  try {
    const breedName = params.breed;
    // Fetch dog images by breed
    const response = await fetch(`https://dog.ceo/api/breed/${breedName}/images`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching breed details:', error);
    throw error;
  }
};

export default BreedDetails;

Update the routes in src/js/routes/index.js:

import Home from '../pages/Home/Home';
+ import BreedDetails from '../pages/BreedDetails/BreedDetails';

const routes = [
  {
    path: "/",
    index: true,
    component: Home,
  },
+ {
+   path: "/breed/:breed",
+   component: BreedDetails,
+ }
];

export default routes;

Now, modify the Home component to add links to breed details:

import React from 'react';
import { useCurrentRouteData } from '@tata1mg/router';
+ import { Link } from '@tata1mg/router';

const Home = () => {
  const { data, error, isFetching } = useCurrentRouteData();
  
  if (isFetching) return <div>Loading breeds...</div>;
  if (error) return <div>Error loading breeds: {error.message}</div>;
  
  const dogs = data?.message || [];
  const breeds = Object.keys(dogs);

  return (
    <div>
      <h1>Available Dog Breeds</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
        {breeds.slice(0, 12).map(breed => (
          <div key={breed} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px', width: '250px' }}>
            <h2 style={{ textTransform: 'capitalize' }}>{breed}</h2>
            <p>Click to see available dogs</p>
+           <Link to={`/breed/${breed}`} style={{ 
+             display: 'inline-block', 
+             padding: '8px 16px', 
+             background: '#4CAF50', 
+             color: 'white', 
+             textDecoration: 'none',
+             borderRadius: '4px'
+           }}>
+             View Dogs
+           </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

// serverFetcher remains the same
Home.serverFetcher = async () => {
  // ...
};

export default Home;

Try clicking on a breed card. You'll notice that when you click the link, the page refreshes instead of performing a client-side navigation. This is because we're missing a clientFetcher for our detail page.